<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
			body{
				background-color: #000;
				color: #FFF;
				font-family: Arial, "MS Trebuchet", sans-serif;
				text-align: center;
				margin: 0;
				padding: 0;
			}
			#J1, #J2{
				margin : 0;
				padding: 0;
				border : cyan solid thin;
			}
			audio {
				display: none;
			}
		</style>
	</head>
	<body>
		<br />
		<canvas id='J1' width='960px' height='480px'></canvas>
		<canvas id='J2' width='960px' height='240px'></canvas>

		<section id="sounds">
			
		</section>


		<script type="text/javascript" src="patterns.js"></script>

		<script type="text/javascript" src="J1.js"></script>
		<script type="text/javascript" src="J1_props.js"></script>
		<script type="text/javascript" src="J2.js"></script>
		<script type="text/javascript" src="Keyboard.js"></script>
		<script type="text/javascript" src="Controller.js"></script>
		<script type="text/javascript" src="Enemies.js"></script>
		<script type="text/javascript" src="GameOver.js"></script>
		<script>
		
		requestAnimFrame = (function() {
		  return window.requestAnimationFrame ||
		     window.webkitRequestAnimationFrame ||
		     window.mozRequestAnimationFrame ||
		     window.oRequestAnimationFrame ||
		     window.msRequestAnimationFrame ||

		     
		     function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
		       window.setTimeout(callback, 1000/60);
		     };
		})();

		//CANVAS
			//Crée le canvas
			var ctx = [];
			ctx["J1"] = $('J1').getContext('2d');
			ctx["J2"] = $('J2').getContext('2d');
			
			//var J = "J1";
			

		//DIMENSIONS	
			//Récupère hauteur 
			MAX_HEIGHT_J1 = $('J1').height;
			//Récupère longueur
			MAX_WIDTH_J1 = $('J1').width;	

			//Récupère hauteur 
			MAX_HEIGHT_J2 = $('J2').height;
			//Récupère longueur
			MAX_WIDTH_J2 = $('J2').width;	
		
		var GAME_SPEED = 0.5; 

		var DEBUG_NIGHTLY = true;
		//Initialisation des GameObject
		//MENUS
		menuJ1.init("J1");
		menuJ2.init("J2");
		//GAMES
		gameJ1.init("J1");
		gameJ2.init("J2");
		//GameOver
		gameOver.init("J1","J2");

		var CurrentGameObject_J1 = menuJ1;
		var CurrentGameObject_J2 = menuJ2;

		function run()
		{
			CurrentGameObject_J1.input();
			CurrentGameObject_J1.update();

			CurrentGameObject_J2.input();
			CurrentGameObject_J2.update();

			requestAnimFrame(run);
		}
		run();


		//Alias document.getElementById
		function $(id){
			return document.getElementById(id);
		}
		
		//Alias console.log
		function log(msg){
			console.log(msg);
		}

		//Fonction pour faire coller les blocs à la grille de jeu
		function getPos(rand, size, borne){
			for(i=0; i<=borne; i += size){
				if(rand < i+size){
					return i;
				}
			}
		}	

		//Détermine la distance entre 2 points
		function distance(a, b, x, y){
			var distance = Math.sqrt((a-x)*(a-x) + (b-y) * (b-y));
			return distance;
		}
		</script>
	</body>
</html>